$(function () {
    //详细分类
    var pro_types = [
        {"type1":"流行","type2":"摇滚","type3":"民族","type4":"音乐节"},
        {"type1":"管弦乐","type2":"独奏","type3":"室内乐及古乐"},
        {"type1":"相声","type2":"魔术","type3":"马戏","type4":"杂技","type5":"戏曲","type6":"其他"},
        {"type1":"话剧","type2":"歌剧","type3":"歌舞剧","type4":"音乐剧","type5":"儿童剧"},
        {"type1":"球类运动","type2":"搏击运动","type3":"其他竞技"},
        {"type1":"舞蹈","type2":"芭蕾","type3":"舞剧"},
        {"type1":"主题公园","type2":"风景区","type3":"展会","type4":"特色体验","type5":"温泉","type6":"滑雪","type7":"游览线路","type8":"度假村","type9":"代金券","type10":"酒店住宿"},
    ];
    //详细页面图片
    var pro_imgs = [
        {"img0":"images/ych0.png","img1":"images/ych1.png","img2":"images/ych2.png","img3":"images/ych3.png","img4":"images/ych4.png"},
        {"img0":"images/yyh0.jpg","img1":"images/yyh1.jpg","img2":"images/yyh2.jpg","img3":"images/yyh3.jpg","img4":"images/yyh4.jpg"},
        {"img0":"images/qyzt0.jpg","img1":"images/qyzt1.jpg","img2":"images/qyzt2.jpg","img3":"images/qyzt3.jpg","img4":"images/qyzt4.jpg"},
        {"img0":"images/hjgj0.jpg","img1":"images/hjgj1.jpg","img2":"images/hjgj2.jpg","img3":"images/hjgj3.jpg","img4":"images/hjgj4.jpg"},
        {"img0":"images/tybs0.jpg","img1":"images/tybs1.jpg","img2":"images/tybs2.jpg","img3":"images/tybs3.jpg","img4":"images/tybs4.jpg"},
        {"img0":"images/wdbl0.jpg","img1":"images/wdbl1.jpg","img2":"images/wdbl2.jpg","img3":"images/wdbl3.jpg","img4":"images/wdbl4.jpg"},
        {"img0":"images/djxx0.jpg","img1":"images/djxx1.jpg","img2":"images/djxx2.jpg","img3":"images/djxx3.jpg","img4":"images/djxx4.jpg"}
    ];
    //详细描述
    var pro_description = [
        {"decrip0":"2016刘若英'Renext 我敢'世界巡回演唱会济南站",
            "decrip1":"我只在乎你邓丽君金曲盛燕专场演唱会",
            "decrip2":"2016陈志朋《志爱—没人能取代记忆中的你》北京演唱会",
            "decrip3":"“微小相见”张楚2016全国巡回演唱会-济南站",
            "decrip4":"动漫歌姬 KOTOKO 2016中国巡回演唱会-北京站"
        },
        {"decrip0":"古琴雅集《怡心琴韵》",
            "decrip1":"暑期艺术之旅／2016国际打击乐节／国家大剧院管弦乐团：碰撞与融合—弗洛指挥门德尔松、施耐德与肖斯塔科维奇",
            "decrip2":"国家大剧院管弦乐团：永恒的挚爱—吕嘉与杨天娲的纯粹舒曼",
            "decrip3":"“微小相见”张楚2016全国巡回演唱会-济南站",
            "decrip4":"中华情怀——民乐名家系列／国家大剧院管弦乐团：陈琳与吴蛮演绎华阴老腔与陈其钢"
        },
        {"decrip0":"昆曲《如花美眷》系列之《牡丹亭》",
            "decrip1":"正乙祠古戏楼版京剧《梅兰芳华》",
            "decrip2":"何云伟、李菁 星夜相声会馆·新大都实力专场",
            "decrip3":"“周二剧场”惠民专场演出票价：",
            "decrip4":"2016菏泽牡丹旅游节-本山传媒刘老根大舞台走进菏泽"
        },
        {"decrip0":"韩版大型童话儿童剧《小红帽》",
            "decrip1":"百老汇音乐剧《我，堂吉诃德》中文版首演",
            "decrip2":"《魔毯梦花园》—— 一场孩子们和意大利艺术家的欢乐涂鸦",
            "decrip3":"大型多媒体梦幻互动儿童剧《白雪公主》（12月）",
            "decrip4":"繁星儿童剧：英雄梦之《玩具星球奇遇记》"
        },
        {"decrip0":"2016年中国足协甲级联赛北京控股足球俱乐部主场比赛",
            "decrip1":"2016浪琴表国际马联(FEI)场地障碍世界杯-中国联赛",
            "decrip2":"2016年英雄榜综合格斗大赛",
            "decrip3":"ROAD FC（路德）国际综合格斗大赛30期",
            "decrip4":"2016 中国体彩“鲁阳”杯国际搏击笼斗争霸赛"
        },
        {"decrip0":"爱乐汇•俄罗斯芭蕾国家剧院芭蕾舞《胡桃夹子》",
            "decrip1":"爱乐汇•俄罗斯芭蕾国家剧院芭蕾舞《天鹅湖》",
            "decrip2":"北京现代舞团经典演出剧目《三更雨•愿》",
            "decrip3":"西班牙国家芭蕾舞团《回廊》《呼吸》",
            "decrip4":"杭州歌剧舞剧院舞剧《遇见大运河》"
        },
        {"decrip0":"易车|呈现 CSI犯罪现场调查体验之旅",
            "decrip1":"韩国互动秀《魔幻科学秀—外星人来了》塘沽站",
            "decrip2":"环球之翼私人飞机体验活动",
            "decrip3":"北京奇域梦相4D艺术馆",
            "decrip4":"【喜来登酒店东楼】大中华国际演艺中心"
        },
    ];
    //商品价格
    var pro_price = [
        {"price0":"¥480起","price1":"¥280起","price2":"¥380起","price3":"¥180起","price4":"¥380起"},
        {"price0":"¥280起","price1":"¥80起","price2":"¥100起","price3":"¥80起","price4":"¥80起"},
        {"price0":"¥280起","price1":"¥280起","price2":"¥60起","price3":"¥50起","price4":"¥180起"},
        {"price0":"¥280起","price1":"¥80起","price2":"¥100起","price3":"¥80起","price4":"¥80起"},
        {"price0":"¥80起","price1":"¥180起","price2":"¥100起","price3":"¥280起","price4":"¥380起"},
        {"price0":"¥180起","price1":"¥30起","price2":"¥50起","price3":"¥80起","price4":"¥60起"},
        {"price0":"¥100起","price1":"¥80起","price2":"¥90起","price3":"¥180起","price4":"¥160起"}
    ];
    //定义定时器
    var timer = null;

    //给左侧商品分类有详细信息的li标签注册鼠标进入事件
    $(".pro_typeul").children(".have_info").mouseenter(function () {
        //获取左侧鼠标进入的li标签
        var link_txt = $(this)
            .children("a")
            .children("span")
            .html();
        //给右侧展示详细信息的页面赋值
        $(this)
            .parent(".pro_typeul")
            .siblings(".pro_info")
            .children(".top")
            .children(".ych_zh")
            .html(link_txt);

        //获取左侧点击的li的索引
        var index = $(this).index();
//             给ych_type底下的li赋值   种类
        //设置商品详细信息页面pro_info的上半部分内容
        //在设置ych_type下面的Li的内容之前先清空一下ych_type的内容
        $(".pro_info .ych_type").empty();
        //用于记录pro_types里每个对象的长度
        var num = 0;
        for (var key in pro_types[index]){
            var $li = $("<li><a href='#'>"+pro_types[index][key]+"</a><i>|</i></li>");
            num += $(pro_types[index]).length;
            $(".pro_info .ych_type").append($li);
        }
        $(".pro_info .ych_type")
            .children("li")[num - 1]
            .innerHTML = "<li><a href='#'>"+pro_types[index][key]+"</a></li>";

        //更换相关热门下的图片
        var $images =  $(".bottom").children("div").find("img");
        var $descriptions =  $(".bottom").children("div").find("p").children("a");
        var $prices =  $(".bottom").children("div").find("p").children("span");

        var len = $(".bottom").children("div").length;

        for (var i = 0; i < len; i++) {
            $images[i].setAttribute("src",pro_imgs[index]["img" + i]);
            $descriptions[i].innerHTML = pro_description[index]["decrip" + i];
            $prices[i].innerHTML = pro_price[index]["price" + i];
        }

        $(".pro_info").fadeIn(200);
    });

    //给左侧商品分类没有详细信息的li标签注册鼠标进入事件
    $(".pro_typeul").children(".no_info").mouseenter(function () {
        //获取左侧鼠标进入的li标签
        $(".pro_info").hide();
    });

    //当鼠标离开盒子时，隐藏右侧商品详细信息部分
    $(".pro_infobox").mouseleave(function () {
        $(".pro_info").hide();
    });

    //当点击商品详细信息部分的关闭按钮时，隐藏右侧商品详细信息部分
    $(".pro_info .close").click(function () {
        $(".pro_info").hide();
    });

    //获取所有图片的个数
    var imgLen = $(".slideul li").length;
    //把第一张图片追加到最后
    var firstImg = $(".slideul li")[0].cloneNode(true);
    $(".slideul").append($(firstImg));
    var secondImg = $(".slideul li")[1].cloneNode(true);
    $(".slideul").append($(secondImg));

    //获取所有按钮li的长度
    var slideBtnLen = $(".slideBtn li").length;
    //把第一个按钮li追加到最后
    for (var i = 0; i < slideBtnLen; i++) {
        var firstSlideBtn = $(".slideBtn li")[i].cloneNode(true);
        $(".slideBtn ul").append($(firstSlideBtn));
    }


    //给轮播图里的切换图片的li注册单击事件
    $(".slideBtn").find("li").click(function() {
        $(this).addClass("cuRrent").siblings("li").removeClass("cuRrent");
        var index = $(this).index();

        //点击按钮时，让图片的ul移动
        if (index >= imgLen+2) {
            index = 2;
           //获取每张图片的宽度
            $(".slideul").css("margin-left",0);
            //获取每个切换按钮的li的宽度
            var slideBtnWidth = parseInt($(this).css("width"));

            // 如果点击了第一轮的最后一张，则将下一轮的第一张的class设置为cuRrent
            $(".slideBtn").find("li").eq(index).addClass("cuRrent");

        }
            //按钮li所在的ul移动的距离//获取每张图片的宽度
            var slideWidth =  parseInt($(".slide").css("width"));
            //图片所在ul移动的距离
            var moveWidth = -index * slideWidth;
            $(".slideul").css("margin-left",moveWidth);

            //获取每个切换按钮的li的宽度
            var slideBtnWidth = parseInt($(this).css("width"));
            //按钮li所在的ul移动的距离
            var slideBtnMoveWidth = -index * slideBtnWidth;
            //设置按钮li所在的ul的位置
            $(this).parent("ul").css("margin-left",slideBtnMoveWidth + 2*slideBtnWidth);

            picNum = index;

    });

    //当鼠标放在存储图片的盒子上，显示箭头
    $(".slide").mouseenter(function () {
        $("#arrow").show();
        clearInterval(timer);
    });

    //当鼠标离开存储图片的盒子时，隐藏箭头
    $(".slide").mouseleave(function () {
        $("#arrow").hide();
        timer = setInterval(playNext,1500);
    });

    //当鼠标放在左侧箭头上时
    $("#arrLeft").mouseenter(function () {
        $("#arrLeft  span").addClass("over");

    });
    //当鼠标离开左侧箭头上时
    $("#arrLeft").mouseleave(function () {
        $("#arrLeft  span").removeClass("over");
    });

    //当鼠标放在左侧箭头上时
    $("#arrRight").mouseenter(function () {
        $("#arrRight  span").addClass("over");
    });
    //当鼠标离开左侧箭头上时
    $("#arrRight").mouseleave(function () {
        $("#arrRight  span").removeClass("over");
    });

    //获取每张图片的宽度
    var slideWidth =  parseInt($(".slide").css("width"));
    //获取每个切换按钮的li的宽度
    var slideBtnWidth = parseInt($(".slideBtn ul").children("li").css("width"));

    //点击右侧箭头
    //记录点击的次数
    var picNum = $(".slideBtn li.cuRrent").index();

    $("#arrRight").click(function() {
        playNext();
        console.log($(".slideBtn li.cuRrent").index());
    });

    //点击左侧箭头
    $("#arrLeft").click(function() {
        if (picNum <= 2) {
            picNum = imgLen + 2;
            $(".slideul").css("margin-left",-imgLen*slideWidth);
        }
        picNum--;

        //图片所在ul移动的距离
        var moveWidth = -picNum * slideWidth;
        $(".slideul").css("margin-left",moveWidth);

        //picNum += 2;
        //按钮li所在的ul移动的距离
        var slideBtnMoveWidth = -picNum * slideBtnWidth;
        //设置按钮li所在的ul的位置
        $(".slideBtn ul").css("margin-left",slideBtnMoveWidth + 2*slideBtnWidth);
        $(".slideBtn ul").children("li").eq(picNum).addClass("cuRrent").siblings("li").removeClass("cuRrent");
    });

    //添加定时器，让图片自动滚动
    timer = setInterval(playNext,1500);

    //播放下一张图片
       function playNext() {
        if (picNum >= imgLen+1) {
            //picNum = 0;
            picNum = 1;
            //$(".slideul").css("margin-left",0);
            $(".slideul").css("margin-left",slideWidth);
        }

            picNum++;
            //图片所在ul移动的距离
            var moveWidth = -picNum * slideWidth;
            $(".slideul").css("margin-left",moveWidth);
            //按钮li所在的ul移动的距离
            var slideBtnMoveWidth = -picNum * slideBtnWidth;
            //
            ////设置按钮li所在的ul的位置
            $(".slideBtn ul").css("margin-left",slideBtnMoveWidth + 2*slideBtnWidth);
            $(".slideBtn ul").children("li").eq(picNum).addClass("cuRrent").siblings("li").removeClass("cuRrent");

    }
});